<!--
 * @Description: 工程交底
 * @Author: wangwangwang
 * @Date: 2020-08-17 15:52:58
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-12-09 11:56:34
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <transition name="from"></transition>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </span>
            <transition name="to"></transition>
            <span v-show="showCardNav">
              <i style="margin-right: 5px" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px">工程名称</span>
                <el-input v-model="tableParam.name" style="width: 200px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <!-- <span style="margin-left: 24px">
                <span style="margin-right: 12px">客户名称</span>
                <el-input v-model="tableParam.roadwork" style="width: 20%; max-width: 200px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span> -->
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px">负责人</span>
                <el-input v-model="tableParam.principal" style="width: 20%; max-width: 200px" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px">交底类型</span>
                <el-select v-model="tableParam.executePhase" placeholder="请选择" style="width: 200px;">
                  <el-option label="委托交底" value="1"></el-option>
                  <el-option label="合同交底" value="4"></el-option>
                </el-select>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card" style="padding-top: 10px">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="tableData" tooltip-effect="dark">
              <el-table-column width="200" prop="code" align="center" label="工程编号"></el-table-column>
              <el-table-column width="300" prop="name" align="center" label="工程名称"></el-table-column>
              <!-- <el-table-column width="200" prop="roadwork" align="center" label="施工单位"></el-table-column>
              <el-table-column prop="roadworklInkman" align="center" label="联系人"></el-table-column>
              <el-table-column prop="roadworkPhone" align="center" label="联系电话"></el-table-column> -->
              <el-table-column width="200" prop="createTime" align="center" label="登记时间"></el-table-column>
              <el-table-column prop="principal" align="center" label="负责人"></el-table-column>
              <el-table-column prop align="center" label="交底类型">
                <template slot-scope="scope">
                  {{scope.row.executePhase === 1? "委托交底":'合同交底'}}
                </template>
              </el-table-column>
              <el-table-column prop align="center" label="交底状态">
                <template slot-scope="scope">
                  {{['待登记','待提交审核','审核中','未通过','已通过'][scope.row.executePhase===1?scope.row.entrustStatus:scope.row.contractStatus]}}
                </template>
              </el-table-column>
              <el-table-column fixed="right" width="160" align="left" label="操作">
                <template slot-scope="scope">
                  <el-button v-if="((scope.row.executePhase===1&&scope.row.entrustStatus===0)||(scope.row.executePhase===4&&scope.row.contractStatus===0))&&ButtonList.findIndex(res=>(res.buttonValue=='DENGJI'))!==-1" class="bottom_one" size="mini" @click="regisSubmit(scope.row,false,1)">
                    登记
                  </el-button>
                  <span v-else-if="(scope.row.executePhase===1&&scope.row.entrustStatus!==2)||(scope.row.executePhase===4&&scope.row.contractStatus!==2)" style="margin-right:10px;">
                    <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='XIUGAI'))!==-1" class="bottom_one" size="mini" @click="regisSubmit(scope.row,false,2)">
                      修改
                    </el-button>
                  </span>
                  <el-button v-if="(scope.row.executePhase===1&&scope.row.entrustStatus!==0)||(scope.row.executePhase===4&&scope.row.contractStatus!==0)" class="bottom_one" size="mini" @click="regisSubmit(scope.row,true,3)">
                    <i class="icon iconfont conicon_button_modification" style="font-size: 12px"></i>
                    查看
                  </el-button>
                  <!-- <el-button v-if="(scope.row.executePhase===1&&scope.row.entrustStatus===1)||(scope.row.executePhase===4&&scope.row.contractStatus===1)" class="bottom_one" size="mini" @click="checkSuccess(scope.row)">
                    审核通过
                  </el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <clarificaitonModel :visible="clarifiVisible" :disabled="isReadOnly" :data="claritem" :handleType="type" @closeSubmit="closeSubmit" @handleSure="hanldeSure" />
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item>
            <span slot="label">联系人</span>
            <el-input v-model="tableParam.roadworklInkman" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">登记时间</span>
            <el-date-picker v-model="startTimDateEndTimDate" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" unlink-panels start-placeholder="开始时间" end-placeholder="结束时间" @change="tableParam.startDate=startTimDateEndTimDate[0]||'',tableParam.endDate=startTimDateEndTimDate[1]||''"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">交底状态</span>
            <el-select v-model="tableParam.status" placeholder="请选择" style="width:400px;">
              <el-option label="待登记" value="0"></el-option>
              <el-option label="待审核" value="1"></el-option>
              <el-option label="审核中" value="2"></el-option>
              <el-option label="未通过" value="3"></el-option>
              <el-option label="已通过" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.roadworklInkman='',startTimDateEndTimDate=[],tableParam.startDate='',tableParam.endDate='',tableParam.status=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import clarificaitonModel from "./components/clarificaitonModel";
import { queryPage } from "@/api/internetSales/projectManagement.js";
import {
  updatedisAuth,
  UpdatePingGu
} from "@/api/internetSales/projectClarifi.js";
export default {
  components: {
    clarificaitonModel,
  },
  mixins: [mixin],
  data() {
    return {
      startTimDateEndTimDate: [],
      tableParamType: false,
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      tableData: [],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      clarifiVisible: false,
      claritem: {},
      auditData: {},
      checkarr: [1, 2, 3, 4],
      checkType: 2,
      item: {},
      isReadOnly: false,
      type: 1,
      loading: false,//是否修改选项
    };
  },
  created() {
    this.tableParam = { ...this.tableParam, name: "", roadwork: "", isAssess: 4, roadworklInkman: '', startDate: '', endDate: '', status: '' };
    this.gettableData();
  },
  methods: {
    init() {
      /*重置数据*/
      this.tableParam.name = "";
      this.tableParam.roadwork = "";
      this.tableParam.executePhase = "";
      this.tableParam.principal = "";
      this.tableParam.roadworklInkman = "";
      this.tableParam.status = "";
      this.startTimDateEndTimDate = "";
      this.tableParam.startDate = "";
      this.tableParam.endDate = "";
      this.gettableData();
    },
    regisSubmit(data, isReadOnly, type) {
      this.claritem = data;
      this.clarifiVisible = true;
      this.isReadOnly = isReadOnly;
      this.type = type;
    },
    checkSuccess(row) {
      UpdatePingGu({
        engineeringId: row.id,
        statusNum: 4,
        statusType: row.executePhase
      }).then(() => {
        this.gettableData();
      })
    },
    closeSubmit() {
      this.clarifiVisible = false;
    },
    hanldeSure() {
      this.clarifiVisible = false;
      this.gettableData();
    },
    submitauditData() {
      this.item.id = this.auditData.id;
      this.item.enginnerId = this.auditData.enginnerId;
      this.item.checkType = this.checkType;
      switch (this.item.checkType) {
        case 1:
          this.item.saleAuthStatus = this.auditData.saleAuthStatus;
          this.item.saleAuthRemark = this.auditData.saleAuthRemark;
          break;
        case 2:
          this.item.budgetAuthStatus = this.auditData.budgetAuthStatus;
          this.item.budgetAuthRemark = this.auditData.budgetAuthRemark;
          break;
        case 3:
          this.item.produceAuthStatus = this.auditData.produceAuthStatus;
          this.item.produceAuthRemark = this.auditData.produceAuthRemark;
          break;
        case 4:
          this.item.masterAuthStatus = this.auditData.masterAuthStatus;
          this.item.masterAuthRemark = this.auditData.masterAuthRemark;
          break;
      }
      updatedisAuth(this.item).then(() => {
        this.gettableData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.audit-title {
  @include discen_al;
  justify-content: space-between;
  padding: 0 0px 10px 0px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.el-input,
.el-select {
  width: 240px;
}
.score-container {
  border: 1px solid #e1e5ed;
  .score-list {
    border-bottom: 1px solid #e1e5ed;
    height: 48px;
  }
  .score-list:last-child {
    border: none;
  }
}
.score-title {
  margin-bottom: 10px;
}
</style>
